<template>
  <div>
    <Modal
      v-model="isTemplate"
      title="运费模版"
      width="70%"
      if="isTemplate"
      @on-cancel="cancel"
      @on-visible-change="close"
    >
      <div class="Modals">
        <Form class="form" ref="formData" :label-width="120" label-position="right">
          <Row :gutter="24" type="flex">
            <Col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
              <FormItem label="模板名称：" prop="name">
                <Input type="text" placeholder="请输入模板名称" :maxlength="20" v-model="formData.name" />
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="24" type="flex">
            <Col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
              <FormItem label="计费方式：" props="state" label-for="state">
                <RadioGroup class="radio" v-model="formData.type" @on-change="changeRadio" element-id="state">
                  <Radio :label="1">按件数</Radio>
                  <Radio :label="2">按重量</Radio>
                  <Radio :label="3">按体积</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="24" type="flex">
            <Col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
              <FormItem class="label" label="配送区域及运费：" props="state" label-for="state">
                <Table
                  ref="table"
                  :columns="columns"
                  :data="templateList"
                  class="ivu-mt"
                  no-data-text="暂无数据"
                  border
                >
                  <template slot-scope="{ row, index }" slot="action">
                    <a v-if="row.regionName !== '默认全国'" @click="delCity(row, '配送区域', index, 1)">删除</a>
                  </template>
                </Table>
                <Row type="flex" class="addTop">
                  <Col>
                    <Button type="primary" icon="md-add" @click="addCity(1)">单独添加配送区域</Button>
                  </Col>
                </Row>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="24" type="flex">
            <Col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
              <FormItem label="指定包邮：" prop="store_name" label-for="store_name">
                <Radio-group class="radio" v-model="formData.appoint_check">
                  <Radio :label="1">开启</Radio>
                  <Radio :label="0">关闭</Radio>
                </Radio-group>
                <Table
                  ref="table"
                  :columns="columns2"
                  :data="appointList"
                  class="addTop ivu-mt"
                  no-data-text="暂无数据"
                  border
                  v-if="formData.appoint_check === 1"
                >
                  <template slot-scope="{ row, index }" slot="action">
                    <a v-if="row.regionName !== '默认全国'" @click="delCity(row, '配送区域', index, 2)">删除</a>
                  </template>
                </Table>
                <Row type="flex" class="addTop" v-if="formData.appoint_check === 1">
                  <Col>
                    <Button type="primary" icon="md-add" @click="addCity(2)">单独指定包邮</Button>
                  </Col>
                </Row>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="24" type="flex">
            <Col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
              <FormItem label="指定不送达：" prop="store_name" label-for="store_name">
                <Radio-group class="radio" v-model="formData.no_delivery_check">
                  <Radio :label="1">开启</Radio>
                  <Radio :label="0">关闭</Radio>
                </Radio-group>
                <Table
                  ref="table"
                  :columns="columns3"
                  :data="noDeliveryList"
                  class="addTop ivu-mt"
                  no-data-text="暂无数据"
                  border
                  v-if="formData.no_delivery_check === 1"
                >
                  <template slot-scope="{ row, index }" slot="action">
                    <a v-if="row.regionName !== '默认全国'" @click="delCity(row, '配送区域', index, 3)">删除</a>
                  </template>
                </Table>
                <Row type="flex" class="addTop" v-if="formData.no_delivery_check === 1">
                  <Col>
                    <Button type="primary" icon="md-add" @click="addCity(3)">单独指定不送达</Button>
                  </Col>
                </Row>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="24" type="flex">
            <Col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
              <FormItem label="排序：" prop="store_name" label-for="store_name">
                <InputNumber :min="0" placeholder="输入值越大越靠前" v-model="formData.sort"></InputNumber>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="24" type="flex">
            <Col>
              <FormItem prop="store_name" label-for="store_name">
                <Button type="primary" @click="handleSubmit">{{ id ? '立即修改' : '立即提交' }}</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div slot="footer"></div>
    </Modal>
    <city ref="city" @selectCity="selectCity" :type="type" :selectArr="selectArr"></city>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import city from '@/components/freightTemplate/city';
import { templatesSaveApi, shipTemplatesApi } from '@/api/setting';
export default {
  name: 'freightTemplate',
  components: { city },
  props: {},
  data() {
    let that = this;
    return {
      isTemplate: false,
      columns: [
        {
          title: '可配送区域',
          key: 'regionName',
          minWidth: 100,
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'text',
                readonly: true,
                size: 'small',
                value: that.templateList[params.index].regionName,
              },
            });
          },
        },
        {
          title: '首件',
          key: 'first',
          minWidth: 70,
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'number',
                size: 'small',
                value: that.templateList[params.index].first, // 此处如何让数据双向绑定
              },
              on: {
                'on-change': (event) => {
                  that.templateList[params.index].first = event.target.value;
                },
              },
            });
          },
        },
        {
          title: '运费（元）',
          key: 'price',
          minWidth: 70,
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'number',
                size: 'small',
                value: that.templateList[params.index].price, // 此处如何让数据双向绑定
              },
              on: {
                'on-change': (event) => {
                  that.templateList[params.index].price = event.target.value;
                },
              },
            });
          },
        },
        {
          title: '续件',
          key: 'continue',
          minWidth: 70,
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'number',
                size: 'small',
                value: that.templateList[params.index].continue, // 此处如何让数据双向绑定
              },
              on: {
                'on-change': (event) => {
                  that.templateList[params.index].continue = event.target.value;
                },
              },
            });
          },
        },
        {
          title: '续费（元）',
          key: 'continue_price',
          minWidth: 70,
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'number',
                size: 'small',
                value: that.templateList[params.index].continue_price, // 此处如何让数据双向绑定
              },
              on: {
                'on-change': (event) => {
                  that.templateList[params.index].continue_price = event.target.value;
                },
              },
            });
          },
        },
        {
          title: '操作',
          slot: 'action',
          minWidth: 70,
        },
      ],
      columns2: [
        {
          title: '选择地区',
          key: 'placeName',
          minWidth: 250,
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'text',
                readonly: true,
                size: 'small',
                value: that.appointList[params.index].placeName,
              },
            });
          },
        },
        {
          title: '包邮件数',
          key: 'a_num',
          minWidth: 100,
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'number',
                size: 'small',
                value: that.appointList[params.index].a_num, // 此处如何让数据双向绑定
              },
              on: {
                'on-change': (event) => {
                  that.appointList[params.index].a_num = event.target.value;
                },
              },
            });
          },
        },
        {
          title: '包邮金额（元）',
          key: 'a_price',
          minWidth: 100,
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'number',
                size: 'small',
                value: that.appointList[params.index].a_price, // 此处如何让数据双向绑定
              },
              on: {
                'on-change': (event) => {
                  that.appointList[params.index].a_price = event.target.value;
                },
              },
            });
          },
        },
        {
          title: '操作',
          slot: 'action',
          minWidth: 100,
        },
      ],
      columns3: [
        {
          title: '选择地区',
          key: 'placeName',
          minWidth: 250,
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'text',
                readonly: true,
                size: 'small',
                value: that.noDeliveryList[params.index].placeName,
              },
            });
          },
        },
        {
          title: '操作',
          slot: 'action',
          minWidth: 100,
        },
      ],
      templateList: [
        {
          region: [
            {
              name: '默认全国',
              city_id: 0,
            },
          ],
          regionName: '默认全国',
          first: 1,
          price: 0,
          continue: 1,
          continue_price: 0,
        },
      ],
      appointList: [],
      noDeliveryList: [],
      type: 1,
      formData: {
        type: 1,
        sort: 0,
        name: '',
        appoint_check: 0,
        no_delivery_check: 0,
      },
      id: 0,

      addressModal: false,
      indeterminate: true,
      checkAll: false,
      checkAllGroup: [],
      activeCity: -1,
      provinceAllGroup: [],
      index: -1,
      displayData: '',
      currentProvince: '',
      selectArr: [], // 传递选中的城市
      noShippingArr: [], // 不包邮选择的城市数据
      yesShippingArr: [], // 包邮选择的城市数据
      noDeliveryArr: [], // 不送达选择的城市数据
    };
  },
  computed: {},
  methods: {
    close(status) {
      if (!status) {
        this.$emit('close');
      }
    },
    editFrom(id) {
      this.id = id;
      shipTemplatesApi(id).then((res) => {
        let formData = res.data.formData;
        this.templateList = res.data.templateList;
        this.appointList = res.data.appointList;
        this.noDeliveryList = res.data.noDeliveryList;
        this.formData = {
          type: formData.type,
          sort: formData.sort,
          name: formData.name,
          appoint_check: formData.appoint_check,
          no_delivery_check: formData.no_delivery_check,
        };
        this.headerType();
      });
    },
    selectCity: function (data, type) {
      let cityName = data
        .map(function (item) {
          return item.name;
        })
        .join(';');
      switch (type) {
        case 1:
          this.templateList.push({
            region: data,
            regionName: cityName,
            first: 1,
            price: 0,
            continue: 1,
            continue_price: 0,
          });
          this.noShippingArr = this.noShippingArr.concat(data);
          break;
        case 2:
          this.appointList.push({
            place: data,
            placeName: cityName,
            a_num: 0,
            a_price: 0,
          });
          this.yesShippingArr = this.yesShippingArr.concat(data);
          break;
        case 3:
          this.noDeliveryList.push({
            place: data,
            placeName: cityName,
          });
          this.noDeliveryArr = this.noDeliveryArr.concat(data);
          break;
      }
    },
    // 单独添加配送区域
    addCity(type) {
      this.selectArr = type == 1 ? this.noShippingArr : type == 2 ? this.yesShippingArr : this.noDeliveryArr;
      this.type = type;
      this.$refs.city.getCityList();
      this.$refs.city.addressModal = true;
    },
    changeRadio() {
      this.headerType();
    },
    headerType() {
      let that = this;
      if (this.formData.type === 2) {
        that.columns[1].title = '首件重量(KG)';
        that.columns[3].title = '续件重量(KG)';
        that.columns2[1].title = '包邮重量(KG)';
      } else if (this.formData.type === 3) {
        that.columns[1].title = '首件体积(m³)';
        that.columns[3].title = '续件体积(m³)';
        that.columns2[1].title = '包邮体积(m³)';
      } else {
        that.columns[1].title = '首件';
        that.columns[3].title = '续件';
        that.columns2[1].title = '包邮件数';
      }
    },
    // 提交
    handleSubmit: function () {
      let that = this;
      if (!that.formData.name.trim().length) {
        return that.$Message.error('请填写模板名称');
      }
      for (let i = 0; i < that.templateList.length; i++) {
        if (that.templateList[i].first <= 0) {
          return that.$Message.error('首件/重量/体积应大于0');
        }
        if (that.templateList[i].price < 0) {
          return that.$Message.error('运费应大于等于0');
        }
        if (that.templateList[i].continue <= 0) {
          return that.$Message.error('续件/重量/体积应大于0');
        }
        if (that.templateList[i].continue_price < 0) {
          return that.$Message.error('续费应大于等于0');
        }
      }
      if (that.formData.appoint_check === 1) {
        for (let i = 0; i < that.appointList.length; i++) {
          if (that.appointList[i].a_num <= 0) {
            return that.$Message.error('包邮件数应大于0');
          }
          if (that.appointList[i].a_price < 0) {
            return that.$Message.error('包邮金额应大于等于0');
          }
        }
      }
      let data = {
        appoint_info: that.appointList,
        region_info: that.templateList,
        no_delivery_info: that.noDeliveryList,
        sort: that.formData.sort,
        type: that.formData.type,
        name: that.formData.name,
        appoint: that.formData.appoint_check,
        no_delivery: that.formData.no_delivery_check,
      };
      templatesSaveApi(that.id, data).then((res) => {
        this.isTemplate = false;
        // this.$parent.getList();
        this.formData = {
          type: 1,
          sort: 0,
          name: '',
          appoint_check: 0,
          no_delivery_check: 0,
        };
        this.appointList = [];
        this.noDeliveryList = [];
        this.addressModal = false;
        this.templateList = [
          {
            region: [
              {
                name: '默认全国',
                city_id: 0,
              },
            ],
            regionName: '默认全国',
            first: 1,
            price: 0,
            continue: 1,
            continue_price: 0,
          },
        ];
        this.$emit('addSuccess');
        this.$Message.success(res.msg);
      });
    },
    // 删除
    delCity(row, tit, num, type) {
      if (type === 1) {
        this.templateList.splice(num, 1);
      } else if (type == 2) {
        this.appointList.splice(num, 1);
      } else {
        this.noDeliveryList.splice(num, 1);
      }
      //   let delfromData = {
      //     title: tit,
      //     num: num,
      //     url: `setting/shipping_templates/del/${row.id}`,
      //     method: "DELETE",
      //     ids: "",
      //   };
      //   this.$modalSure(delfromData)
      //     .then((res) => {
      //       this.$Message.success(res.msg);
      //     })
      //     .catch((res) => {
      //       this.$Message.error(res.msg);
      //     });
    },
    // 关闭
    cancel() {
      this.noShippingArr = [];
      this.noDeliveryArr = [];
      this.yesShippingArr = [];
      this.selectArr = [];
      this.formData = {
        type: 1,
        sort: 0,
        name: '',
        appoint_check: 0,
        no_delivery_check: 0,
      };
      this.appointList = [];
      this.noDeliveryList = [];
      this.addressModal = false;
      this.templateList = [
        {
          region: [
            {
              name: '默认全国',
              city_id: 0,
            },
          ],
          regionName: '默认全国',
          first: 0,
          price: 0,
          continue: 0,
          continue_price: 0,
        },
      ];
    },

    address() {
      this.addressModal = true;
    },
    enter(index) {
      this.activeCity = index;
    },
    leave() {
      this.activeCity = null;
    },
  },
  mounted() {},
};
</script>
<style lang="stylus" scoped>
.ivu-table-wrapper {
  border-left: 1px solid #dcdee2;
  border-top: 1px solid #dcdee2;
}

.ivu-table-border th, .ivu-table-border td {
  padding: 0 10px !important;
}

.addTop {
  margin-top: 15px;
}

.radio {
  padding: 5px 0;
}

.ivu-input-number {
  width: 100%;
}
</style>
